import React from 'react';
import Link from 'next/link';
import SidebarNoteList from './SidebarNoteList';
import EditButton from './EditButton';
import { Suspense } from 'react';
import NoteListSkeleton from './NoteListSkeleton';

async function Sidebar() {

  return (
    <>
      <section className="col sidebar">
        <Link href={'./'} className="link--unstyled">
          <section className="sidebar-header">
            <img src="/logo.svg" alt="" className='logo' />
            <strong>React nodes</strong>
          </section>
        </Link>
        <section className="sidebar-menu">
          <EditButton noteId={null}>New</EditButton>
        </section>
        <nav>
          <Suspense fallback={<NoteListSkeleton />}>
            <SidebarNoteList />
          </Suspense>
        </nav>
      </section>
    </>
  )
}

export default Sidebar;